<template>
	<view>
		<Navbar></Navbar>
		<view class="u-m-20 u-card-box">
			<view class="u-m-l-10 u-m-b-30 u-font-30 u-font-bold">{{title}}，我们会尽快与您联系</view>
			<!-- <view class="u-flex u-flex-wrap">
				<view :class="item.check ? 'check_tag' : 'noCheck_tag'" v-for="item in feedbackList" :key="item.id" @click="onCheckType(item)">{{item.name}}</view>
			</view> -->
			<u-input type="textarea" :custom-style="textareaStyle" :clearable="false" :placeholder="desc"
				height="194" maxlength="2000" v-model="remark"></u-input>
			<view class="u-m-t-20 u-flex u-row-between u-col-bottom">
				<u-upload :action="action" :show-progress="false" :max-count="4" image-mode="widthFix" width="120"
					height="120" @on-success="onImageSuccess" @on-remove="onImageRemove"
					:before-upload="beforeUpload"></u-upload>
				<view>{{imageList.length}}/4</view>
			</view>
		</view>
		<Bottom :btnText="'提交申请'" @confirm="onSubmit"></Bottom>
		
		<!-- 联系人弹出框 -->
		<u-mask :show="feedData.show" mode="center" border-radius="20" width="600rpx" :mask-click-able="false">
			<view class="u-width-100 u-height-100 u-flex u-row-center u-col-center">
				<view class="u-text-center">
					<view class="u-back-white u-radius-20 u-p-20">
						<view class="u-font-34 u-font-bold">您的申请已提交，请等待专人与您联系</view>
						<view class="u-font-34 u-font-bold u-m-t-10 u-m-b-10">如需其他咨询可添加以下二维码</view>
						<u-image width="534rpx" height="100%" mode="widthFix" :src="feedData.info.qrcode"></u-image>
						<view class="u-p-t-10 u-p-b-20 u-text-center u-font-34 u-font-bold">平台联系人：{{feedData.info.qrcode_word}}</view>
					</view>
					<view class="u-m-t-30">
						<u-icon name="close-circle" size="52" color="#fff" @click.native.stop="onModalConfirm"></u-icon>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Bottom from '@/components/Bottom.vue'
	import env from '@/network/env.js'
	import {
		addFeedback,
		feedbackAllType,
		addCooperate
	} from '@/network/api.js'
	export default {
		components: {
			Navbar,
			Bottom
		},
		data() {
			return {
				textareaStyle: {
					background: '#F3F4F6',
					borderRadius: '20rpx',
					padding: '20rpx'
				},
				remark: '',
				tea_id: '',
				imageList: [],
				feedbackList: [],
				title: '请填写您的项目简介',
				desc: '请描述您的项目简介',
				action: `${env.baseUrl}/api/uploadOssImage`,
				feedData:{
					show:false,
					info: {}
				}
			}
		},
		onLoad() {
			this.onGetType()
		},
		methods: {
			async onGetType() {
				const res = await feedbackAllType({type:1})
				res.data.list = res.data.list.slice(2,5)
				res.data.list.map(item=>{
					item.check = false
				})
				this.feedbackList = res.data.list
			},
			onCheckType(val){
				val.check = !val.check
			},
			onImageSuccess(val) {
				this.imageList.push(val.data.url)
			},
			onImageRemove(val) {
				this.imageList.splice(val, 1)
			},
			beforeUpload(index) {
				uni.showLoading({
					title: "上传中..."
				})
			},
			onSubmit() {
				if (this.remark) {
					const params = {
						uid: uni.getStorageSync("user_id"),
						content: this.remark,
						tea_id: '',
						images: this.imageList.join(','),
						type_id: 8
					}
					let list = []
					this.feedbackList.map(item=>{
						if(item.check){
							list.push(item.id)
						}
					})
					// params.type_id = list.join(",")
					addCooperate(params).then((res) => {
						this.feedData.info = res.data
						this.feedData.show = true
					})
				} else {
					uni.showToast({
						icon: "none",
						duration: 3000,
						title: "请描述您的项目简介"
					})
				}
			},
			onModalConfirm(){
				uni.switchTab({
					url: "/pages/mine/mine"
				})
			}
		}
	}
</script>

<style scoped>
	.type_box {
		padding: 20rpx;
		background: #F3F4F6;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		display: inline-block;
	}
	
	.noCheck_tag{
		padding: 16rpx 40rpx;
		background: #F4F5F7;
		color: #818695;
		border: 1rpx solid #F4F5F7;
		margin: 0 20rpx 20rpx 0;
		border-radius: 50rpx;
	}
	
	.check_tag{
		padding: 16rpx 40rpx;
		background: #fff;
		color: #FB6E1F;
		border: 1rpx solid #FB6E1F;
		margin: 0 20rpx 20rpx 0;
		border-radius: 50rpx;
	}
</style>